/* app/containers/App.js */
import React from 'react';
import { connect } from 'react-redux';
import * as ListsAction from '../actions/list';
import { bindActionCreators } from 'redux';

import UserCollect from '../components/detail_module/user_collect';
import GroupList from '../components/GroupList';
import Toast from '../components/toast';
import Model from '../components/model';
import Button from '../components/button';

import YmtApiMixin from '../mixins/YmtApiMixin';
import toastMixin from '../mixins/toastMixin';

import RuleDialog from './RuleDialog';

import YmtApi from 'YmtApi';

let getData = function(UserId,AccessToken,callback){

	const { actions } = this.props;

	const authInfo = YmtApi.utils.getAuthInfo();

	UserId = UserId || authInfo.UserId;
	AccessToken = AccessToken || authInfo.AccessToken;

	actions.getCurrentGroupList({ UserId , AccessToken,PageSize:20 },null,(data)=>{
		this.showToast(data.Msg)
	});

	actions.getLatestGroupList({ UserId , AccessToken,PageSize:20 },null,(data)=>{
		this.showToast(data.Msg)
	});

	actions.getUserCollect({ UserId , AccessToken },(result,data)=>{
		var loading = document.getElementById('loading');
		// loading && loading.remove();  三星Note3不支持remove
		if (loading) {
			loading.parentNode.removeChild(loading);
		}
		let isEmpty = false
		if(!result.Data.TopicDto){
			isEmpty = true;
		}	
		this.setState({
			isLoadIng:false,
			isEmpty
		});

		callback && callback(result,data)	
	},(data)=>{
		this.showToast(data.Msg);
	});		
}

let List = React.createClass({
	mixins:[ YmtApiMixin,toastMixin ],
	getInitialState(){
		return {
			toastShow:false,
			ruleShow:false,
			isLoadIng:true,
			isEmpty:false
		}
	},
	componentDidMount(){
		let that = this;

		YmtApi.on('userStatusChange refreshPageEvent',((res)=>{
			getData.call(this,res.UserId,res.AccessToken)
		}).bind(this));
		
		getData.call(this,null,null,(result,data)=>{
			const {TopicDto={}} = data;
			YmtApi.isWechat && YmtApi.initWechat({
	           shareConf:{
	               title:TopicDto.WeiXinShare.ShareTitle,
	               desc:TopicDto.WeiXinShare.ShareDesc,
	               imgUrl:TopicDto.WeiXinShare.SharePicUrl,
	               link:location.href.replace(/[&,\?](AccessToken|unionId|openId|wxToken)=[^&#]*/ig, '')
	           }
	       });
		})
		
	},
	onOpenShowRule(){
		const { actions,topicRule } = this.props;
		this.setState({
			ruleShow:true
		});

		if(topicRule.state !== 2){
			actions.getTopicRule({},null,(result)=>{
				this.showToast(result.Msg);
			});
		}
	},	
	render (){ 
		const { userCollect,currentGroupList,latestGroupList,topicRule } = this.props;
		const { data = {} } = topicRule,
			  _data = userCollect.data || {},
			  { TopicDto = {} } = _data;
			  //<h3>哈尼，砍价团有新规则啦~</h3>
		let bg = TopicDto.BannerPicUrl ? {backgroundImage:'url('+TopicDto.BannerPicUrl+')'} : {}
		if(this.state.isLoadIng){
			return null;
		}
		if(this.state.isEmpty){
			return (
				<div className="group-empty">
					<div className="pic"></div>
					哈尼，活动已经结束了呢～
				</div>
			)
		}
		return (
			<div>
				<header className="group-list-hd rule-wrapper" style={bg}>
					<div className="rule-detail" 
						 onClick={ this.onOpenShowRule }>活动规则 <i className="iicon-arrow iicon-arrow-right"></i></div>
					
					<div dangerouslySetInnerHTML={{__html:TopicDto.TopicRemark}}></div>	
				</header>
				<UserCollect userCollect={ userCollect } openUrl={ this.openUrl } hasLogin = { this.hasLogin }/> 
				<div className="group-list-container">
					<header className="group-title">
						<h4>
							<span>正在进行</span>
						</h4>
					</header>
					<GroupList phase="" groupList={ currentGroupList }/>
					{
						(latestGroupList.state !== 2 || +(latestGroupList.data.TuanList)!==0 ) &&
							(
								<header className="group-title">
									<h4>
										<span>即将开始</span>
									</h4>
								</header> 
							)
					}
					<GroupList phase="" groupList={ latestGroupList }/>
					<footer className="load-over">
						<div>
							<span>刷完了</span>
						</div>
					</footer>
				</div>
				<RuleDialog show={ this.state.ruleShow } content={data.Content} onHideDialog={()=>{
										  	 this.setState({
										  	 	ruleShow:false
										  	 })
										  }}/>
				<Toast show={ this.state.toastShow } 
						   message={ this.state.toastTxt }/>
			</div>
		)
	}
});

export default connect(state => (state), dispatch => ({
	actions: bindActionCreators(ListsAction,dispatch)
}))(List);